<template>
  <view>
    <!-- <nav-bar title="项目统计和收益"></nav-bar> -->
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <!-- <view class="content"><tab-index @tabClick="tabClick" :activeIndex="active"></tab-index></view> -->
    <!--  <view class="time-box">
        <view class="text">时间</view>
        <view class="date">
          <uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
        </view>
      </view> -->
      <view class="tab-list">
        <view v-for="(item, index) in tabData" :key="index" :class="['tab-box', activeIndex === index ? 'active' : 'tab']"
          @click="handelClick(item, index)">
          <view>{{ item.name }}</view>
        </view>
      </view>
      <!-- <view class="table" v-if="activeIndex === 0">
        <view class="head">
          <view style="width: 25%;">项目分类</view>
          <view style="width: 25%;">项目名称</view>
          <view style="width: 50%;">我服务的项目次数</view>
        </view>
        <view class="box" v-for="(item, index) in tableData" :key="index">
          <view style="width: 25%;">{{ item.name }}</view>
          <view style="width: 25%;">{{ item.phone }}</view>
          <view style="width: 50%;">{{ item.number }}次</view>
        </view>
      </view> -->
      <view>
        <view class="project-table" v-for="(item, index) in projectData" :key="index">
          <view class="earn">
            <view class="title">{{ item.itemTypeName }}</view>
            <view class="project">订单号：{{ item.orderId }}</view>
          </view>
          <view class="earn">
            <view class="title">{{ item.itemName }}</view>
            <view class="project">{{ item.technicianName }}</view>
            <view class="project">支付时间：{{ item.paymentTime }}</view>
            <!-- <view class="project">{{ item.time }}</view> -->
          </view>
          <view class="earn" style="border-bottom: none;padding-bottom: 0;">
            <view class="project">项目收益：<span style="color: #01B960;">{{ item.itemEarnings !== null ? item.itemEarnings + '元' : '0元' }}</span></view>
           <view class="project">包间收益：<span style="color: #01B960;">{{ item.compartmentEarnings !== null ? item.compartmentEarnings + '元' : '0元' }}</span></view>
            <view class="project">附加商品收益：<span style="color: #01B960;">{{ item.productEarnings!== null ?item.productEarnings+ '元' : '0元' }}</span></view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import tabIndex from '../../components/statis/tab-index.vue'
import { getCardEarnData } from "@/api/system/static"
export default {
  name: 'earning',
  components: { NavBar, tabIndex },
  data() {
    return {
      mainHeight: '',
      activeIndex: 0,
      active:0,
      range:[],
      tabData: [
        // {
        //   name: '项目统计'
        // },
        {
          name: '项目收益'
        }
      ],
      beginTime: '2023.5.30',
      endTime: '2023.5.30',
      tableData: [
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        },
        {
          name: '哈哈哈',
          phone: '18771319801',
          number: '20',
          times: '3',
          type: 1
        }
      ],
      projectData: [],
      today:'',
      beforeDay:'',
      thisMonth:'',
      beforeMonth:'',
	  createTime:'',
	  monthTime:'',
    }
  },
  onLoad(option){
	  this.createTime=option.createTime
	  this.monthTime=option.monthTime
    this.getCardEarnData()
	  
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
    this.getDay()
    this.getBeforeDay()
    // this.getCardEarnData()
  },
  methods: {
    tabClick(item) {
    },
    handelClick(item, index) {
      this.activeIndex = index
    },
    getTableHead() {
      this.tableData.unshift({
        name: '客户姓名',
        phone: '客户手机号',
        number: '门店消费次数',
        times: '我的服务次数',
        type: '客户类型'
      })
    },
    maskClick(e){
      this.getCardEarnData()
		},
    getDay() {
      var date = new Date();
      // 获取当前月份
      var nowMonth = date.getMonth() + 1;

      // 获取当前是几号
      var strDate = date.getDate();

      // 添加分隔符“-”
      var seperator = "-";

      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }

      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      this.today = date.getFullYear() + seperator + nowMonth + seperator + strDate;
      this.thisMonth = date.getFullYear() + seperator + nowMonth
    },
    getBeforeDay() {
      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
      var date = new Date(time);


      // 获取当前月份
      var nowMonth = date.getMonth() + 1;

      // 获取当前是几号
      var strDate = date.getDate();

      // 添加分隔符“-”
      var seperator = "-";

      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }

      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      this.beforeDay = date.getFullYear() + seperator + nowMonth + seperator + strDate;
      this.beforeMonth = date.getFullYear() + seperator + nowMonth;
    },
    getCardEarnData() {
      if(this.createTime){
        getCardEarnData({ createTime:this.createTime }).then((res) => {
          this.projectData = res.rows
        })
      }else{
        getCardEarnData({ monthTime:this.monthTime }).then((res) => {
          this.projectData = res.rows
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
}

.tab-list {
  display: flex;
  justify-content: space-around;
  margin-top: 25rpx;
  border-bottom: 1rpx solid #d3d3d3;

  .tab-box {
    padding-bottom: 10rpx;
  }

  .active {
    font-size: 45rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    color: #333333;
    border-bottom: 1rpx solid #C27E15;
  }

  .tab {
    font-size: 41rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }
}

.time-box {
  margin-top: 20rpx;
  padding: 0 30rpx;
  display: flex;

  .text {
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    margin-right: 20rpx;
    line-height: 68rpx;
  }

  .time-list {
    display: flex;
    height: 68rpx;
    background-color: #fff;
    line-height: 68rpx;
    border-radius: 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    padding: 0 30rpx;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
    }
  }
}

.table {
  // width: 100%;
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 25rpx 30rpx;


  .box {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    font-size: 33rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    &:last-child {
      border-bottom: none;
    }

  }

  .head {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #E6E6E6;
    // justify-content: space-between;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
}

.project-table {
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 25rpx 30rpx;
  padding: 10rpx 0 38rpx;

  .earn {
    padding: 15rpx 30rpx 17rpx;
    border-bottom: 1rpx solid #f8f8f8;

    .title {
      font-size: 42rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      margin-bottom: 10rpx;

    }

    .project {
      font-size: 38rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      margin-bottom: 10rpx;
    }
  }
}
</style>